<template>
  <div
    ref="fullscreenElement"
    style="user-select: none; -webkit-tap-highlight-color: transparent"
  >
    <Modelheader @clearData="clearData"></Modelheader>
    <div>
      <div class="cropperBox">
        <div
          class="cropperImageset"
          @mousedown="startDrag"
          @mousemove="onDrag"
          @mouseup="stopDrag"
          @mouseleave="stopDrag"
          :style="{
            cursor: isDragging ? 'grabbing !important' : 'grab !important',
            width: type === 'detail' ? '100%' : 'calc(100% - 480px)',
          }"
          v-loading="bgLoading"
          element-loading-background="rgba(255, 255, 255, 0.8)"
        >
          <ImageSelector
            ref="childComponent"
            :style="{
              transform: `translate(${offsetX}px, ${offsetY}px) scale(${
                scale / 100
              })`,
            }"
            :drawLoading="drawLoading"
            @newRectangle="newRectangle"
            :drawStatus="drawStatus"
            :pagevale="pagevale"
            :imageUrllist="modelenews"
            @isDrawingChange="isDrawingChange"
            :modelarealistcavans="modelarealistcavans"
            :canvasindex="canvasindex"
            :canbaspage="canbaspage"
            :scale="scale"
            :isDragging="isDragging"
            :startX="startX"
            :startY="startY"
            :offsetX="offsetX"
            :offsetY="offsetY"
            @cancasClick="cancasClick"
            :rotateAngle="rotateAngle[pagevale - 1]"
          />
        </div>
        <div>
          <div class="templatePage">
            <div
              v-for="(item, index) in modelenews"
              :key="index"
              :class="pagevale - 1 == index ? 'hover imgbox' : 'imgbox'"
              @click="changeImage(index)"
            >
              {{ index + 1 }}
            </div>
          </div>
          <div class="templatePage1" style="width: 350px">
            <!-- 进度条缩放 -->
            <el-slider
              v-model="scale"
              :min="1"
              :max="100"
              v-if="questionPageList.length"
              show-input
              style="width: 100%"
            >
            </el-slider>
          </div>
          <div class="control-group" v-if="questionPageList.length">
            <span>旋转角度：</span>
            <el-slider
              v-model="rotateAngle[pagevale - 1]"
              :min="-360"
              :max="360"
              :step="45"
              style="width: 200px; margin-left: 20px"
            />
          </div>
        </div>
        <div
          class="uploadcardInfo"
          v-loading="listLoading"
          v-if="type !== 'detail'"
        >
          <div class="custom-title1" style="border: none">
            <span style="margin-left: 10px">处理列表</span>
          </div>
          <el-collapse
            v-model="activeName"
            accordion
            style="border-top: none"
            v-infinite-scroll="addQuestionList"
            :infinite-scroll-disabled="
              loading || count === questionPageList.length
            "
          >
            <!-- {{ questionPageList }} -->
            <el-collapse-item
              v-for="item in questionPageList"
              :name="item.id"
              v-loading="bgLoading"
              :key="item.id"
            >
              <template #title>
                <div class="custom-title">
                  <span style="margin-left: 10px"
                    >{{ item.questionName }}（{{
                      item.markerTeacherName
                    }}）</span
                  >
                </div>
              </template>
              <div class="locationmark">
                <div class="flex">
                  <div>
                    <p>题卡科目：{{ item.subjectName }}</p>
                    <p>上传时间：{{ item.createdTime }}</p>
                    <p style="display: flex">
                      异常状态：
                      <dict-tag
                        :options="dict.type.exception_exam_questions"
                        :value="item.markerType"
                      />
                    </p>
                  </div>
                  <div>
                    <p>
                      <el-button
                        @click="scrapMethodDialogVisible = true"
                        type="danger"
                        style="width: 120px"
                        :disabled="item.status !== 0"
                        >报废处理</el-button
                      >
                    </p>
                    <p>
                      <el-button
                        @click="subExceptionHandling"
                        type="primary"
                        style="width: 120px"
                        :disabled="item.status !== 0"
                      >
                        {{ item.status === 0 ? "提交" : "已提交" }}
                      </el-button>
                    </p>
                    <!-- <p><el-button @click="returnMethodSub(item)" type="primary"  style="width: 120px;" :disabled="item.status === 1">
												回退
											</el-button></p> -->
                  </div>
                </div>
                <div>
                  <el-row :gutter="20" style="margin-top: 20px">
                    <el-col
                      :span="8"
                      v-for="btn in reCutImageBtnList"
                      :key="btn.id"
                      style="text-align: center; margin-bottom: 20px"
                    >
                      <el-button
                        plain
                        @click="
                          locationmark(
                            1,
                            btn.page,
                            btn.templatePointType,
                            0,
                            btn
                          )
                        "
                        type="primary"
                        class="mb-10"
                        style="width: 140px"
                        :disabled="item.status !== 0"
                      >
                        {{ btn.templatePointType }}(重新切图 )</el-button
                      >
                    </el-col>
                    <el-col
                      :span="8"
                      style="text-align: center; margin-bottom: 20px"
                    >
                      <el-button
                        @click="cardOrder"
                        plain
                        type="primary"
                        class="mb-10"
                        style="width: 140px"
                        :disabled="item.status !== 0"
                        >题卡顺序切换</el-button
                      >
                    </el-col>
                    <el-col
                      :span="8"
                      style="text-align: center; margin-bottom: 20px"
                    >
                      <el-button
                        @click="rotateImage(1)"
                        plain
                        type="primary"
                        class="mb-10"
                        style="width: 140px"
                        :disabled="item.status !== 0"
                        >顺时针90°旋转</el-button
                      >
                    </el-col>
                    <el-col
                      :span="8"
                      style="text-align: center; margin-bottom: 20px"
                    >
                      <el-button
                        @click="rotateImage(2)"
                        plain
                        type="primary"
                        class="mb-10"
                        style="width: 140px"
                        :disabled="item.status !== 0"
                        >逆时针90°旋转</el-button
                      >
                    </el-col>
                    <el-col
                      :span="8"
                      style="text-align: center; margin-bottom: 20px"
                    >
                      <el-button
                        @click="reUploadDialogVisible = true"
                        plain
                        type="primary"
                        class="mb-10"
                        style="width: 140px"
                        :disabled="item.status !== 0"
                        >重传题卡</el-button
                      >
                    </el-col>
                  </el-row>
                </div>
              </div>
            </el-collapse-item>
            <div v-if="loading" class="loading-container">
              <el-icon class="loading-icon" :size="20"><Loading /></el-icon>
              <span class="loading-text">数据加载中...</span>
            </div>
            <p
              v-if="!loading && count === questionPageList.length"
              class="no-more"
            >
              没有更多数据了
            </p>
          </el-collapse>
        </div>
      </div>
    </div>
    <el-dialog title="报废处理" :visible.sync="scrapMethodDialogVisible">
      <el-form>
        <el-form-item label="请选择报废方式" label-width="120px">
          <el-radio v-model="scrapMethod" :label="1">此题报废</el-radio>
          <el-radio v-model="scrapMethod" :label="2">整卷报废</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="scrapMethodDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleScrapSub()">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="重新上传答题卡"
      :visible.sync="reUploadDialogVisible"
      @close="cancelUpload"
    >
      <div
        style="position: relative; height: 300px; box-sizing: border-box"
        v-loading="allLoading"
      >
        <span style="margin-right: 20px">请选择重传方式</span>
        <el-radio v-model="oneOrAll" :label="1">单题重传</el-radio>
        <el-radio v-model="oneOrAll" :label="2">整卷重传</el-radio>
        <div class="reUploadCardimage">
          <div class="uploaddiv">
            <template v-if="modelenews.length > 0">
              <div
                @dragover.prevent="handleDragOver(index)"
                @dragleave="handleDragLeave(index)"
                @drop="handleFileByIndex($event, index, item.id)"
                v-for="(item, index) in modelenews"
                :key="item.pageNo"
                class="boxsetdelecte"
              >
                <div
                  style="
                    width: 200px;
                    height: 140px;
                    text-align: center;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                  "
                >
                  <div
                    class="mask"
                    :class="{ 'is-active': dragActiveIndex === index }"
                  >
                    {{
                      dragActiveIndex === index
                        ? "松开替换当前图片"
                        : "点击上传图片/拖拽图片"
                    }}
                  </div>
                  <img
                    :src="item.imageUrl"
                    alt=""
                    style="max-width: 100%; max-height: 100%"
                  />
                </div>
                <div class="buttonboxedit">
                  <i>第{{ index + 1 }}页</i>
                  <i
                    ><input
                      type="file"
                      class="fileIndex"
                      @change="handleFileByIndex($event, index, item.id)"
                      accept="image/*"
                    />重新上传</i
                  >
                </div>
                <!-- <div  class="upload-wrapper">
      <div class="image-preview" :class="{ 'is-active': dragActiveIndex === index }">
        <img :src="item.imageUrl" alt="">
      </div>
    </div>
    <div class="buttonboxedit">
      <i>第{{ index+1 }}页</i>
      <i>
        <input 
          type="file" 
          class="fileIndex" 
          @change="handleFileByIndex($event, index, item.id)" 
          accept="image/*"
        />
        重新上传
      </i>
    </div> -->
              </div>
            </template>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelUpload">取 消</el-button>
        <el-button type="primary" @click="handleUploadSub()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ImageSelector from "@/components/model/positioningareaYC.vue"; //切图
import { debounce, throttle } from "lodash";
import Modelheader from "@/components/model/modelheadYC.vue";
import {
  ycclExceptionList,
  getFirstDetail,
  getCardDetail,
  scrapQuestion,
  updatamodelcase,
  updateCardPosition,
  reSubmitCard,
  switchCard,
  rotateCard,
  submitResult,
  getIsRated,
} from "@/api/xmgl/pyjd.js";
import draggable from "vuedraggable";
export default {
  name: "App",
  computed: {
    totalLocations() {
      return this.pageonelocation.length + this.pagetwolocation.length;
    },
    isselect() {
      return this.map;
    },
  },
  dicts: ["exception_exam_questions"],
  data() {
    return {
      cardOrderIndex: 0,
      reUploadDialogVisible: false,
      imgarray: [],
      scrapMethodDialogVisible: false,
      scrapMethod: undefined,
      // 拖拽
      isDragging: false,
      noFragging: false,
      startX: 0,
      startY: 0,
      offsetX: 0,
      offsetY: 0,
      isDrawing: false,
      navbar: [
        {
          name: "模板信息及上传",
          id: 0,
        },
        {
          name: "水平定位",
          id: 1,
        },
        {
          name: "定位区",
          id: 2,
        },
        {
          name: "准考证号区",
          id: 3,
        },
        {
          name: "客观题区",
          id: 4,
        },
        {
          name: "主观题区",
          id: 5,
        },
      ],
      tabnavindex: 0,
      examclassify: "",
      examclassifylist: ["条形码", "涂点", "手写"],
      examNumber: "",
      examNumberlist: [
        4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22,
      ],
      cardNumber: 2,
      cardNumberlist: [2, 4, 6],
      cardColor: "",
      cardColorlist: ["黑色", "灰色", "彩色"],
      examdpi: "",
      examdpilist: [150, 200, 300],
      images: [],
      questiontype: "",
      // questionList:[
      // 	{
      // 		name:'定位点',
      // 		id:1
      // 	},
      // 	{
      // 		name:'文字定位',
      // 		id:2
      // 	}
      // ],
      loading: false,
      selectradio: 1,
      fillinWidth: 0,
      fillinHeight: 0,
      intervalWidth: 0,
      intervalHeight: 0,
      modelobj: {
        id: 0,
        examId: 0,
        examCourseId: 0,
        examNoLength: 4,
        answerCardPages: 2,
        status: 0,
        templateImages: [],
      },
      moduleImageurl: {},
      templateId: "", //模板id
      examCourseId: "", //考试科目id
      modeldata: {
        templateId: 0,
        examCourseId: 0,
        templateAreaType: 1,
      },
      positioningare: {
        id: 0,
        templateId: 0,
        templateAreaType: 0,
        templateCuttingRegion: [],
      },
      modeltypequestion: [],
      modelarealist: [],
      modelarealistcavans: [],
      examInfo: {},
      editmodelishow: false,
      pagevale: 1,
      modelenews: [],
      examName: "",
      telemplatelist: [],
      isFullscreen: false, // 当前是否处于全屏状态
      activeName: null,
      drawStatus: false,
      clitpage: 0,
      clittype: 0,
      clitname: 0,
      menuItems: [
        { fieldType: 1, label: "第一页-1" },
        { fieldType: 11, label: "第一页-2" },
        { fieldType: 13, label: "第一页-3" },
        { fieldType: 12, label: "第一页-4" },
      ],
      menuItems1: [
        { fieldType: 1, label: "第二页-1" },
        { fieldType: 11, label: "第二页-2" },
        { fieldType: 13, label: "第二页-3" },
        { fieldType: 12, label: "第二页-4" },
      ],
      activeindex: -1,
      activeindex1: -1,
      pageonelocation: [],
      pagetwolocation: [],
      canvasindex: 0,
      canbaspage: 1,
      examnumberdata: [],
      txmdata: [],
      sujectdata: [],
      qkbjdata: [],
      examNumbers: [],
      scale: 100,
      sleectId: undefined,
      xmxx: {},
      questionPageList: [],
      questionId: undefined,
      templateIndex: 0,
      reCutImageBtnList: [],
      dataBackup: undefined, // 备份预删除数据
      oneOrAll: 1,
      rotateAngle: [0, 0],
      chooseListPage: {},
      pageId: undefined,
      // 执行顺序-操作记录
      executionOrder: [],
      pageSize: 20,
      pageNum: 1,
      count: 0,
      subjectId: undefined,
      drawLoading: false,
      activeNameOld: undefined,
      bgLoading: false,
      reportErrors: {
        reSubmitCardSub: "重传答题卡",
        rotateImageSub: "旋转答题卡",
        cardOrderSub: "调整答题卡顺序",
        locationmarkSub: "重新切图",
      },
      listLoading: false,
      allLoading: false,
      dragActiveIndex: -1,
      type: undefined,

	  examStudentId:null
    };
  },
  watch: {
    activeName: {
      handler(newVal, oldVal) {
        if (newVal && oldVal === null && this.questionPageList.length !== 0) {
          console.log("首次加载");
          // 首次加载
          this.bgLoading = true;
          // this.$router.replace({ query: {subjectId:this.subjectId} });
          this.pagevale = 1;
          this.modelenews = [];
          this.modelenewsBack = [];
          this.rotateAngle = [0, 0];
          let obj = this.questionPageList.find((item) => item.id === newVal);
          this.questionId = obj.questionId
            ? obj.questionId
            : obj.questionGroupId;

          // this.changeParam({id:obj.id,subjectId:this.subjectId})
          this.pageId = newVal;
          this.chooseListPage = obj;
          this.getTemplateInfo();
        }
        // 关比折叠面板不进行操作
        // 再次打开如果不是上次打开的面板，重新加载数据
        if (
          this.activeNameOld &&
          newVal &&
          newVal !== this.activeNameOld &&
          this.questionPageList.length !== 0
        ) {
          console.log("再次加载");
          this.bgLoading = true;
          this.pagevale = 1;
          this.modelenews = [];
          this.modelenewsBack = [];
          this.rotateAngle = [0, 0];
          let obj = this.questionPageList.find((item) => item.id === newVal);
          this.questionId = obj.questionId
            ? obj.questionId
            : obj.questionGroupId;

          // this.changeParam({id:obj.id,subjectId:this.subjectId})
          this.pageId = newVal;
          this.chooseListPage = obj;
          this.getTemplateInfo();
        }
        if (this.questionPageList.length === 0) {
          // 列表为空，清空内容
          // this.$router.replace({ query: {subjectId:this.subjectId} });
          this.pagevale = 1;
          this.modelenews = [];
          this.modelenewsBack = [];
          this.modelarealistcavans = [];
          this.rotateAngle = [0, 0];
        }
        if (newVal) {
          // 记录面板上次展开
          this.activeNameOld = newVal;
        }
      },
    },
  },
  computed: {},
  async created() {
    this.type = this.$route.query.type;
    /**
     *
     */
    this.examStudentId = JSON.parse(
      sessionStorage.getItem("ycclId")
    ).examStudentId;
    this.pageId = JSON.parse(sessionStorage.getItem("ycclId")).id;
    this.subjectId = JSON.parse(sessionStorage.getItem("ycclId")).subjectId;
    await this.$store.dispatch("getXmxx").then(async (res) => {
      this.xmxx = res;
      await this.getFirstDetail();
      await this.getycclExceptionList();
      console.log(this.questionPageList, "this.questionPageList");
      // this.questionPageList = this.questionPageList.filter(item=>item.status!==1)
      this.activeName = this.questionPageList[0].id;
    });
  },
  mounted() {
    // 监听全屏状态变化
    //   document.onfullscreenchange = this.handleFullscreenChange;
    // this.getTemplateInfo()
    // this.modeltab()
  },
  methods: {
    // 提交
    async subExceptionHandling() {
      // if ( this.executionOrder.length===0) {
      // 	this.$message.error('请先操作');
      // 	return
      // }
      this.listLoading = true;
      this.executeAllActions()
        .then(() => {
          // this.$message.success('所有操作已完成！');
          // 可选：刷新数据或跳转页面
          let name = this.activeName;
          this.activeName = undefined;
          this.activeName = name;
          console.log(this.chooseListPage, "this.chooseListPage");
          let obj = {
            questionId: this.chooseListPage.questionId
              ? this.chooseListPage.questionId
              : this.chooseListPage.questionGroupId,

            studentId: this.chooseListPage.examStudentId,
            examId: this.subjectId,
          };
          submitResult(obj, this.chooseListPage.id)
            .then((res) => {
              if (res.code === 200) {
                this.$message.success("提交成功！");
                this.executionOrder = [];
                let index = this.questionPageList.findIndex(
                  (item) => item.id === this.chooseListPage.id
                );
                this.questionPageList[index].status = 1;
                // this.questionPageList.splice(index,1)
                // this.count--
                // if (JSON.parse(sessionStorage.getItem('ycclId')).id === this.chooseListPage.id) {
                // 	sessionStorage.setItem('ycclId',JSON.stringify({
                // 		id:this.questionPageList[index === this.count?index-1:index]?.id,
                // 		subjectId:this.subjectId
                // 	}))
                // }
                // this.activeName = this.questionPageList[index === this.count?index-1:index]?.id || undefined
              }
            })
            .catch((err) => {
              // this.$message.error('提交失败！');
            })
            .finally(() => {
              this.listLoading = false;
            });
          // this.fetchData();
        })
        .catch((error) => {
          this.$message.error(`${error.message}`);
        })
        .finally(() => {
          this.listLoading = false;
        });
    },
    // 执行所有操作
    async executeAllActions() {
      for (const item of this.executionOrder) {
        try {
          await this.executeAction({
            type: item.type,
          });
        } catch (error) {
          console.error("执行流程中断:", error);
          throw error; // 抛出异常供上层处理
        }
      }
    },
    // 重传题卡
    reSubmitCardSub() {
      console.log("走着扔了");

      const obj = {
        examMainId: this.xmxx.id,
        examId: this.xmxx.id,
        questionId: this.questionId ? this.questionId : this.questionGroupId,
        imgUrls:
          this.modelenews
            ?.filter((item) => item.newfile)
            .map((item) => {
              return {
                frontOrBack: item.pageNo,
                newUrl: item.imageUrl,
              };
            }) || [],
        studentId: this.chooseListPage.examStudentId,
        templateId: this.chooseListPage.examTemplateId,
        oneOrAll: this.oneOrAll,
      };
      return reSubmitCard(obj);
    },
    // 题卡顺序切换
    cardOrderSub() {
      const obj = {
        examMainId: this.xmxx.id,
        questionId: this.questionId ? this.questionId : this.questionGroupId,
        studentId: this.chooseListPage.examStudentId,
        type: this.cardOrderIndex,
      };
      return switchCard(obj);
    },
    // 旋转
    rotateImageSub() {
      const obj = {
        rotateImages: [],
      };
      this.rotateAngle.forEach((item, index) => {
        let o = {
          examMainId: this.xmxx.id,
          templateId: this.chooseListPage.examTemplateId,
          pageNo: index + 1,
          degrees: item < 0 ? -item : item, // 保证角度为正值
          clockwise: item > 0 ? 0 : 1, // θ顺时针 1逆时针
          frontOrBack: index + 1,
          questionId: this.questionId ? this.questionId : this.questionGroupId,
          studentId: this.chooseListPage.examStudentId,
        };
        obj.rotateImages[index] = o;
      });
      return rotateCard(obj);
    },
    // 修改答题卡坐标
    locationmarkSub() {
      console.log(this.dataBackup, "this.dataBackup");
      const flattenedData = this.dataBackup
        .flatMap((pageArray, pageIndex) =>
          pageArray.map((item) => ({
            x: item?.x || 0,
            y: item?.y || 0,
            width: Math.abs(item?.width || 0),
            height: Math.abs(item?.height || 0),
            templateId: item.templateId,
            page: item.page,
            id: item.id,
          }))
        )
        .filter(Boolean);
      const objP = {
        imgSheetVos: flattenedData,
        questionId: this.questionId ? this.questionId : this.questionGroupId,
        examMainId: this.xmxx.id,
        studentId: this.chooseListPage.examStudentId,
      };
      // 修改坐标
      return updateCardPosition(objP);
    },
    async executeAction(action) {
      try {
        const result = this[action.type]();
        // 统一处理Promise
        if (result instanceof Promise) {
          return await result;
        }
        // 处理非Promise返回值
        if (typeof result?.then === "function") {
          return await result;
        }
        return result;
      } catch (error) {
        console.error(`执行${reportErrors[action.type]}失败:`, error);
        throw new Error(`操作失败: ${reportErrors[action.type]}`);
      }
    },
    // 取消上传答题卡
    cancelUpload() {
      this.modelenews = JSON.parse(JSON.stringify(this.modelenewsBack));
      this.reUploadDialogVisible = false;
    },
    // 确定上传答题卡
    handleUploadSub() {
      this.modelenewsBack = JSON.parse(JSON.stringify(this.modelenews));
      this.reUploadDialogVisible = false;
      this.addExecutionOrder({
        type: "reSubmitCardSub",
        value: this.cardOrderIndex,
        page: this.pagevale,
        templateId: this.chooseListPage.templateId,
        timestamp: Date.now(),
      });
    },
    // changeParam: debounce(function(value) {
    // 	this.$router.replace({ query: value });
    // }, 300),
    addExecutionOrder(newItem) {
      // 移除同类型旧数据
      this.executionOrder = this.executionOrder.filter(
        (item) => item.type !== newItem.type
      );
      // 添加新数据
      this.$set(this.executionOrder, this.executionOrder.length, newItem);
    },
    // 报废题目：提交之后删除本条数据，请求列表第一条数据详情并展开
    handleScrapSub() {
      if (!this.scrapMethod) {
        this.$message.warning("请选择报废方式");
        return false;
      }
      console.log(this.chooseListPage, "this.chooseListPage");
      let obj = [
        {
          studentId: this.chooseListPage.examStudentId,
          questionId: this.questionId ? this.questionId : this.questionGroupId,
          scrapType: this.scrapMethod, // 此题 1；整卷 2；
          id: this.chooseListPage.id,
          templateId: this.chooseListPage.examTemplateId,
          examSubjectId: this.subjectId,
        },
      ];
      getIsRated(obj).then((res) => {
        if (res.data) {
          this.$confirm("题目已存在打分，是否确认报废", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              scrapQuestion(obj)
                .then((res) => {
                  if (res.code === 200) {
                    this.$message.success("报废成功");
                    let index = this.questionPageList.findIndex(
                      (item) => item.id === this.chooseListPage.id
                    );
                    this.questionPageList[index].status = 1;

                    // this.questionPageList.splice(index,1)
                    // this.count--
                    // if (JSON.parse(sessionStorage.getItem('ycclId')).id === this.chooseListPage.id) {
                    // 	sessionStorage.setItem('ycclId',JSON.stringify({
                    // 		id:this.questionPageList[index === this.count?index-1:index]?.id,
                    // 		subjectId:this.subjectId
                    // 	}))
                    // }
                    // this.getFirstDetail()
                    // this.activeName = this.questionPageList[index === this.count?index-1:index]?.id || undefined
                  }
                })
                .finally(() => {
                  this.scrapMethodDialogVisible = false;
                });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消删除",
              });
            });
        } else {
          scrapQuestion(obj)
            .then((res) => {
              if (res.code === 200) {
                this.$message.success("报废成功");
                let index = this.questionPageList.findIndex(
                  (item) => item.id === this.chooseListPage.id
                );
                this.questionPageList[index].status = 1;

                // this.questionPageList.splice(index,1)
                // this.count--
                // if (JSON.parse(sessionStorage.getItem('ycclId')).id === this.chooseListPage.id) {
                // 	sessionStorage.setItem('ycclId',JSON.stringify({
                // 		id:this.questionPageList[index === this.count?index-1:index]?.id,
                // 		subjectId:this.subjectId
                // 	}))
                // }
                // // this.getFirstDetail()
                // this.activeName = this.questionPageList[index === this.count?index-1:index]?.id || undefined
              }
            })
            .finally(() => {
              this.scrapMethodDialogVisible = false;
            });
        }
      });
    },
    rotateImage: throttle(function (type) {
      console.log(this.rotateAngle, "this.rotateAngle");
      if (
        this.rotateAngle[this.pagevale - 1] === 360 ||
        this.rotateAngle[this.pagevale - 1] === -360
      ) {
        this.rotateAngle[this.pagevale - 1] = 0;
        this.$set(this.rotateAngle, this.pagevale - 1, 0);
      }
      if (type === 1) {
        this.$set(
          this.rotateAngle,
          this.pagevale - 1,
          (this.rotateAngle[this.pagevale - 1] += 90)
        );
      }
      if (type === 2) {
        this.$set(
          this.rotateAngle,
          this.pagevale - 1,
          (this.rotateAngle[this.pagevale - 1] -= 90)
        );
      }
      this.addExecutionOrder({
        type: "rotateImageSub",
        value: this.rotateAngle[this.pagevale - 1],
        rotateAngle: this.rotateAngle[this.pagevale - 1],
        page: this.pagevale,
        timestamp: Date.now(),
      });
    }, 600),
    // 获取第一条数据详情
    async getFirstDetail() {
      await getFirstDetail(this.pageId, { examStudentId: this.examStudentId })
        .then((res) => {
          if (res.code === 200 && res.data) {
            // if(res.data.status !== 1){
            // status = 1 已处理，移出列表
            this.questionPageList = this.questionPageList.concat(res.data);
            // this.activeName = res.data.id
            // }
          }
        })
        .catch((err) => {
          if (this.questionPageList.length !== 0) {
            this.activeName = this.questionPageList[0].id;
          }
        });
    },
    // 获取右侧列表
    async getycclExceptionList() {
      let obj = {
        pageSize: this.pageSize,
        pageNum: this.pageNum,
      };
      await ycclExceptionList(obj, this.subjectId)
        .then((res) => {
          // this.questionList = this.questionList.concat(res.rows)
          const safeQuestionList = Array.isArray(this.questionPageList)
            ? this.questionPageList
            : [];
          const validRows = Array.isArray(res.rows) ? res.rows : [];

          this.$set(this, "questionPageList", [
            ...safeQuestionList,
            ...validRows.filter(
              (newItem) =>
                !safeQuestionList.some(
                  (existingItem) => existingItem.id === newItem.id
                )
            ),
          ]);
          this.pageNum++;
          // this.questionList = this.questionList.filter(item=>item.id!==res.data[0].id).concat(res.rows)
          this.count = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    cardOrder: debounce(function () {
      this.cardOrderIndex = this.cardOrderIndex === 0 ? 1 : 0;
      // 可选：添加状态变化后的操作
      // this.modelenews
      this.swapFieldValues(0, 1, "imageUrl");
      this.$forceUpdate();
    }, 800),
    swapFieldValues(indexA, indexB, fieldName) {
      if (
        indexA >= 0 &&
        indexA < this.modelenews.length &&
        indexB >= 0 &&
        indexB < this.modelenews.length
      ) {
        const temp = this.modelenews[indexA][fieldName];
        this.$set(
          this.modelenews[indexA],
          fieldName,
          this.modelenews[indexB][fieldName]
        );
        this.$set(this.modelenews[indexB], fieldName, temp);
        this.modelenewsBack = JSON.parse(JSON.stringify(this.modelenews));
        this.addExecutionOrder({
          type: "cardOrderSub",
          value: this.cardOrderIndex,
          page: this.pagevale,
          timestamp: Date.now(),
        });
      }
    },
    startDrag(e) {
      if (!this.noFragging && !this.isDrawing) {
        this.isDragging = true;
        this.startX = e.clientX - this.offsetX;
        this.startY = e.clientY - this.offsetY;
      }
    },
    onDrag(e) {
      if (!this.noFragging && !this.isDrawing) {
        if (!this.isDragging) return;
        this.offsetX = e.clientX - this.startX;
        this.offsetY = e.clientY - this.startY;
      }
    },
    stopDrag() {
      if (!this.noFragging && !this.isDrawing) {
        this.isDragging = false;
      }
    },
    isDrawingChange(e) {
      console.log(e, "修改了isDrawing");

      this.isDrawing = e;
    },
    cancasClick(page) {
      this.drawLoading = false;
      if (this.drawStatus && this.pagevale === page) {
        this.activeindex = null;
        this.$nextTick(() => {
          this.modelarealistcavans = JSON.parse(
            JSON.stringify(this.dataBackup[page - 1])
          );
          // this.$message.warning('已恢复原始数据1');
        });
        this.drawStatus = false;
      }
    },
    isFieldTypeActive(fieldType) {
      // console.log(this.pageonelocation,'this.pageonelocation-wxd');

      return this.pageonelocation.some((item) => item.fieldType == fieldType);
    },
    isFieldTypeActive1(fieldType) {
      return this.pagetwolocation.some((item) => item.fieldType == fieldType);
    },
    addQuestionList() {
      this.loading = true;

      if (this.count === this.questionPageList.length) {
        this.getycclExceptionList();
      }
    },
    // wxd-获取选框模板、
    getTemplateInfo() {
      this.modelarealistcavans = [];
      getCardDetail(
        {
          studentId: this.chooseListPage.examStudentId,
          templateId: this.chooseListPage.examTemplateId,
          questionId: this.questionId ? this.questionId : this.questionGroupId,
          examMainId: this.xmxx.id,
        },
        this.xmxx.id
      )
        .then((res) => {
          if (res.code === 200) {
            //坐标点第一二页 合并过滤操作，减少遍历次数

            const btnList = res.data?.imgSheetVos
              ?.sort((a, b) => a.page - b.page)
              .map((item, index) => {
                return {
                  ...item,
                  templatePointType: `编号${index + 1}`,
                };
              });
            const [page1, page2] = btnList?.reduce(
              (acc, item) => {
                item.page === 1 ? acc[0].push(item) : acc[1].push(item);
                return acc;
              },
              [[], []]
            );
            this.reCutImageBtnList = btnList || [];
            this.pageonelocation = page1 || [];
            this.pagetwolocation = page2 || [];
            // 使用单次遍历完成数据转换
            if (this.pagevale === 1) {
              this.templateIndex = 0;
            }
            this.modelarealistcavans = this.processData(btnList, this.pagevale);
            this.dataBackup = JSON.parse(JSON.stringify([page1, page2]));

            // 使用对象解构提升性能
            const { frontImgPath, backImgPath } = res.data;
            this.modelenews = [
              { pageNo: 1, imageUrl: frontImgPath },
              { pageNo: 2, imageUrl: backImgPath },
            ];
            this.modelenewsBack = JSON.parse(JSON.stringify(this.modelenews));
          }
        })
        .finally(() => {
          this.bgLoading = false;
        });
    },
    processData(data, page) {
      return data
        .filter((item) => item.page === page)
        .map((item, index) => ({
          ...item,
        }));
    },

    // 重新切图
    async locationmark(xh, page, name, index, item) {
      if (this.pagevale !== page) {
        this.$message.warning(
          `当前切图在第${page}页，请切换到第${page}页进行修改！`
        );
        return false;
      }
      // 备份当前数据
      // console.log(this.noFragging,'this.noFraggingthis.noFraggingthis.noFraggingthis.noFragging');
      this.modelarealistcavans;
      this.noFragging = true;
      this.isDrawing = false;
      this.drawLoading = !this.drawLoading;
      // console.info(this.drawStatus && this.pagevale === page,'this.pagevale === page',this.pagevale,page,this.drawStatus)
      this.canvasindex = xh;
      this.canbaspage = page;
      if (this.drawStatus && this.pagevale === page) {
        console.log(11);
        this.activeindex = null;
        this.$nextTick(() => {
          this.modelarealistcavans = JSON.parse(
            JSON.stringify(this.dataBackup[page - 1])
          );
          this.drawStatus = false;
          this.$message.warning("已恢复原始数据");
        });
      } else {
        console.log(22, name);
        this.clitpage = page;
        this.clittype = xh;
        this.clitname = name;
        this.drawStatus = true;
        this.$nextTick(async () => {
          let index = this.modelarealistcavans.findIndex(
            (e) => e.templatePointType === item.templatePointType
          );
          await this.modelarealistcavans.splice(index, 1);
          this.$message.warning(
            `旧的切图暂时隐藏，重新切图之后更新，若无操作再次点击按钮恢复`
          );
        });
      }
      this.noFragging = false;
    },
    examqxlist(xh, page, name) {
      this.drawStatus = true;
      this.clitpage = page;
      this.clittype = xh;
      this.clitname = name;
    },
    examnumberclick(xh, page, name) {
      this.drawStatus = true;
      this.clitpage = page;
      this.clittype = xh;
      this.clitname = name;
    },
    //切图坐标点
    newRectangle(val) {
      this.drawLoading = false;
      console.info("val", val);
      // 标准化坐标存储
      const startX = Math.min(val.x, val.x + val.width);
      const startY = Math.min(val.y, val.y + val.height);
      const absWidth = Math.abs(val.width);
      const absHeight = Math.abs(val.height);

      let option = {
        templateId: this.chooseListPage.examTemplateId,
        page: this.pagevale,
        // fieldType:this.clittype,
        // fieldName:	this.clitname,
        templatePointType: this.clitname,
        x: startX,
        y: startY,
        width: absWidth,
        height: absHeight,
        // sort: 0
      };

      // let index = this.dataBackup[this.pagevale-1].findIndex(item=>item.templatePointType === this.clitname)
      // this.dataBackup[this.pagevale-1][index].splice(index,1)
      // 安全的数据操作
      this.$nextTick(() => {
        const pageIndex = this.pagevale - 1;
        if (this.dataBackup[pageIndex]) {
          const index = this.dataBackup[pageIndex].findIndex(
            (item) => item.templatePointType === this.clitname
          );

          if (index > -1) {
            this.dataBackup[pageIndex].splice(index, 1, {
              ...this.dataBackup[pageIndex][index],
              ...option,
            });
          }
        }
      });
      this.addExecutionOrder({
        type: "locationmarkSub",
      });
    },
    // 退回
    returnMethodSub(e) {
      console.log(e);
      this.$confirm("题目已存在打分，是否确认报废", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let obj = {
          questionId: e.questionId ? e.questionId : e.questionGroupId,
          studentId: e.examStudentId,
          examId: this.subjectId,
        };
        submitResult(obj).then((res) => {
          if (res.code === 200) {
            this.$message.success("退回成功");
            let index = this.questionPageList.findIndex(
              (item) => item.id === this.chooseListPage.id
            );
            this.questionPageList[index].status = 1;
          }
        });
      });
    },
    // 切换分页
    changeImage(index) {
      this.pagevale = index + 1;
      if (this.pagevale === 1) {
        this.templateIndex = 0;
      }
      this.$nextTick(() => {
        this.modelarealistcavans = JSON.parse(
          JSON.stringify(this.dataBackup[index])
        );
      });
    },
    // 处理第一页的上传
    handleFileChange(event) {
      this.uploadFile(event, 1, 0); // 传入页码1
    },

    // 处理其他页的上传
    handleFileChange1(event) {
      this.uploadFile(event, 2, 0); // 传入页码2或其他逻辑
    },
    //修改
    handleFileByIndex(event, index, id) {
      this.uploadFile(event, index + 1, id); // 传入页码2或其他逻辑
    },
    // 统一的文件上传方法
    uploadFile(event, pageNo, id) {
      this.allLoading = true;
      const file = event.target.files[0];
      if (!file) return;
      const formData = new FormData();
      formData.append("file", file);

      updatamodelcase(formData)
        .then((res) => {
          if (res.code === 200) {
            if (pageNo == 1) {
              this.pageoneishow = false;
            } else {
              this.pagetwoishow = false;
            }
            // 查找是否已存在相同pageNo的项
            const existingIndex = this.modelenews.findIndex(
              (item) => item.pageNo === pageNo
            );
            const newItem = {
              templateId: this.chooseListPage.templateId,
              pageNo: pageNo,
              imageUrl: res.msg,
              newfile: true,
              id: id,
            };

            if (existingIndex >= 0) {
              // 临时-替换现有项
              this.$set(this.modelenews, existingIndex, newItem);
            } else {
              // 临时-添加新项
              this.modelenews.push(newItem);
            }
          }
        })
        .catch((error) => {
          console.error("上传失败:", error);
        })
        .finally(() => {
          event.target.value = "";
          this.allLoading = false;
          this.dragActiveIndex = -1;
        });
    },

    // 切换全屏
    toggleFullscreen() {
      if (!document.fullscreenEnabled) {
        alert("您的浏览器不支持全屏功能！");
        return;
      }

      if (this.isFullscreen) {
        // 退出全屏
        document.exitFullscreen();
        this.$refs.fullscreenElement.style.overflow = "auto";
      } else {
        // 进入全屏
        this.$refs.fullscreenElement.requestFullscreen();
        this.$refs.fullscreenElement.style.overflow = "auto";
      }
    },
    // 处理全屏状态变化
    handleFullscreenChange() {
      this.isFullscreen = !!document.fullscreenElement;
    },
    clearData() {
      this.getTemplateInfo();
    },
    handleDragOver(index) {
      console.log("走了1");

      this.dragActiveIndex = index;
    },
    handleDragLeave(index) {
      console.log("走了2");
      if (this.dragActiveIndex === index) {
        this.dragActiveIndex = -1;
      }
    },
  },
  components: {
    ImageSelector,
    Modelheader,
    draggable,
  },
};
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
}
.header {
  padding: 0 40px;
  height: 48px;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  background: #2379f6;
  font-size: 16px;
}
.header h3 {
  font-weight: normal;
  font-size: 16px;
}
.header p {
  display: flex;
}
.header p b {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 134px;
  height: 32px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 17px;
  border: 1px solid #ffffff;
  text-align: center;
  line-height: 32px;
  cursor: pointer;
  margin-right: 14px;
}
.header p b img {
  width: 16px;
  margin-right: 8px;
}
.header p em {
  display: inline-block;
  width: 76px;
  height: 32px;
  background: #ffffff;
  border-radius: 17px;
  border: 1px solid #ffffff;
  color: #2379f6;
  text-align: center;
  line-height: 32px;
  cursor: pointer;
}
.tabNav {
  padding: 0 40px;
  height: 54px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px 0 10px;
  background: #fff;
}
.tabNav ul {
  display: flex;
  align-items: center;
  font-size: 14px;
}
.tabNav ul li {
  padding: 0 20px;
  cursor: pointer;
  line-height: 38px;
  color: #557292;
  position: relative;
}
.tabNav ul li:hover,
.tabNav ul li.hover {
  color: #2a303b;
}
.tabNav ul li:hover::after,
.tabNav ul li.hover::after {
  content: "";
  width: 24px;
  height: 4px;
  background: #295cff;
  border-radius: 2px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
}
.tabNav span {
  display: inline-block;
  width: 140px;
  height: 34px;
  background: #f2f6fb;
  border-radius: 10px;
  border: 1px solid #295cff;
  font-weight: 500;
  font-size: 14px;
  color: #295cff;
  text-align: center;
  line-height: 34px;
  cursor: pointer;
}
/* 上传 */
.uploadMarks {
  box-sizing: border-box;
  background: #f4f7fd;
  width: 100vw;
  height: calc(100vh - 48px);
  position: relative;
}
.smcsbutton {
  width: 124px;
  height: 34px;
  background: #2379f6;
  border-radius: 10px;
  font-size: 14px;
  color: #ffffff;
  text-align: center;
  border: none;
  /* margin:24px 0 0 24px; */
  position: absolute;
  padding: 0;
  left: 24px;
  top: 24px;
}
.boxcenter {
  display: flex;
  justify-content: space-between;
}
.uploadcardInfo {
  width: 480px;
  height: calc(100vh - 48px);
  background: #fff;
  position: relative;
  box-shadow: 0 4px 16px 0 #5572921a;
  overflow-y: auto;
}
.examboxbutton {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 0 15px;
  height: 54px;
  background: #e8f0fa;
  position: absolute;
  left: 0;
  bottom: 0;
}
.examboxbutton >>> .el-button {
  width: 124px;
  height: 34px;
  border-radius: 10px;
  padding: 0;
  margin: 0;
  font-size: 12px;
  border: 1px solid #295cff;
  color: #295cff;
  background: none;
}
.examboxbutton >>> .el-button:first-child {
  background: #295cff;
  border: 1px solid #295cff;
  color: #fff;
}
.examboxbutton >>> .el-button:nth-child(2) {
  margin: 0 8px;
}
.examboxbutton1 {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 0 15px;
  height: 54px;
  background: #e8f0fa;
  position: absolute;
  left: 0;
  bottom: 0;
  justify-content: center;
}
.examboxbutton1 >>> .el-button {
  width: 124px;
  height: 34px;
  border-radius: 10px;
  padding: 0;
  margin: 0;
  font-size: 12px;
  border: 1px solid #295cff;
  color: #295cff;
  background: none;
}
.examboxbutton1 >>> .el-button:first-child {
  background: #295cff;
  border: 1px solid #295cff;
  color: #fff;
}
.examboxbutton1 >>> .el-button:nth-child(2) {
  margin: 0 8px;
}
.uploadcardInfo h3 {
  line-height: 67px;
  border-bottom: solid 1px #d8e4f0;
  padding: 0 24px;
  color: #2a303b;
  font-weight: normal;
}
.uploadCardimage {
  width: calc(100% - 460px);
  height: calc(100vh - 48px);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
}
.uploadCardimage span {
  display: block;
  width: 100%;
  text-align: center;
}
.uploaddiv {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
.uploaddivattention {
  font-size: 14px;
  color: #b3b8c2;
}
.cropperBox {
  height: calc(100vh - 48px);
  display: flex;
  overflow: hidden;
}
.cropperImageset {
  width: calc(100% - 480px);
  height: calc(100vh - 48px);
  overflow: hidden;
  position: relative;
}
.routate {
  position: absolute;
  left: 50px;
  top: 5px;
  background: #fff;
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 10px 0 0;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  font-size: 14px;
  color: #557292;
  border-radius: 10px;
  z-index: 10;
}
.routate >>> .el-select,
.routate >>> .el-input {
  width: 150px;
}
.routate >>> .el-select {
  margin-right: 10px;
}
.routate >>> .el-input {
  margin-left: 10px;
  margin-right: 10px;
}
.routate >>> .el-button {
  border-radius: 10px;
  height: 35px;
  width: 55px;
  padding: 0;
  margin-left: 10px;
}
.routate >>> .el-input__inner {
  border-radius: 10px;
  height: 35px;
}
.image-preview img {
  box-sizing: border-box;
  width: 150px;
  height: 150px;
  background: #ffffff;
  border-radius: 10px;
  text-align: center;
  font-size: 16px;
  color: #295cff;
  cursor: pointer;
  margin: 22px;
}
.searchlist {
  box-sizing: border-box;
  width: auto;
  padding: 0 40px;
  display: flex;
  justify-content: space-between;
  height: 54px;
  background: #ffffff;
  border-radius: 10px;
  padding: 0 24px;
  align-items: center;
}
.searchlist {
  padding-left: 20px;
  display: flex;
  align-items: center;
  justify-content: left;
}
.searchlist a {
  display: block;
  color: #557292;
  font-size: 14px;
  /* width:100px; */
  text-align: center;
  position: relative;
  line-height: 52px;
  padding: 0 15px;
}
.searchlist a:hover,
.searchlist a.hover {
  color: #295cff;
}
.searchlist a:hover::after,
.searchlist a.hover::after {
  content: "";
  width: 24px;
  height: 4px;
  background: #295cff;
  border-radius: 2px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
}
.boxsetetid {
  display: flex;
  align-items: center;
}
.boxsetetid >>> .el-input__inner {
  width: 90px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid #295cff;
  font-weight: 500;
  font-size: 14px;
  color: #295cff;
}
.boxsetetid >>> .el-select .el-input .el-select__caret {
  color: #295cff;
}
.boxsetetid >>> .el-input__icon {
  line-height: 34px;
}
.boxsetetid >>> .el-button {
  padding: 0;
  width: 96px;
  height: 34px;
  background: #295cff;
  border-radius: 10px;
  color: #fff;
  line-height: 34px;
  margin: 0 10px;
}
.breadBox >>> .el-breadcrumb__inner a,
.breadBox >>> .el-breadcrumb__inner.is-link {
  font-weight: normal;
}
.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner,
.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a,
.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
  font-weight: bold;
}
.examnumberset {
  display: flex;
  align-items: center;
  padding: 0 0 0 20px;
}
.examnumberset li {
  width: 20px;
  height: 20px;
  border-radius: 2px;
  text-align: center;
  line-height: 20px;
  margin-right: 10px;
  cursor: pointer;
  border: solid 1px #ec555a;
  color: #ec555a;
}
.examnumberset li.red {
  border: 1px solid #295cff;
  color: #1a48db;
}
.examnumbercontent b {
  display: block;
  padding: 0 20px;
  font-size: 14px;
  color: #5b6371;
  font-weight: normal;
}
.examnumbercontent:hover,
.examnumbercontent.hover {
  background: #e8f0fa;
}
.nameexamnum {
  display: flex;
  align-items: center;
}
.nameexamnum i {
  display: inline-block;
  width: 44px;
  height: 20px;
  background: #1a48db;
  border-radius: 2px;
  line-height: 20px;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
  color: #fff;
  font-style: normal;
  cursor: pointer;
}
.nameexamnum span {
  display: inline-block;
  width: 44px;
  height: 20px;
  background: #ec555a;
  border-radius: 2px;
  line-height: 20px;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
  color: #fff;
  font-style: normal;
  margin-left: 10px;
  cursor: pointer;
}
.nameexamnumul {
  display: flex;
  align-items: center;
  padding: 0 0 0 20px;
  height: 20px;
}
.titlebnumber {
  display: block;
  font-style: normal;
  font-size: 14px;
  color: #5b6371;
  padding: 0 0 0 20px;
  font-weight: normal;
}
.locationmark {
  padding-top: 15px;
  cursor: pointer;
}
.locationmark:hover,
.locationmark.hover {
  /* background:#E8F0FA; */
}
.nameexamnumul li {
  width: 64px;
  height: 20px;
  border: 1px solid #1a48db;
  border-radius: 2px;
  font-size: 12px;
  color: #1a48db;
  line-height: 20px;
  text-align: center;
  margin-right: 10px;
}
.nameexamnumul li.red {
  border: solid 1px #ec555a;
  color: #ec555a;
}
.nameexamnumul li.hover,
.nameexamnumul li:hover {
  background: #1a48db;
  border: solid 1px #1a48db;
  color: #fff;
}

/* >>> .el-collapse-item__header, >>> .el-collapse, >>> .el-collapse-item__wrap{
    border:none
  } */
.custom-title1 {
  width: 100%;
  border-bottom: solid 1px #5572921a;
  padding: 15px 0;
  cursor: pointer;
}
.custom-title1 span,
.custom-title span {
  font-size: 16px;
  color: #2a303b;
}
.custom-title1 span.hover,
.custom-title span.hover {
  color: #1a48db;
}
.custom-title1 span i,
.custom-title span i {
  font-style: normal;
  color: #ec555a;
}
.custom-title1 span i.hover,
.custom-title span i.hover {
  color: #27b787;
}
.templatePage {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 10;
  display: flex;
  align-items: center;
}
.templatePage1 {
  position: fixed;
  right: 500px;
  bottom: 24px;
  z-index: 10;
  display: flex;
  align-items: center;
}
.imgbox {
  width: 32px;
  height: 32px;
  background: #ffffff;
  border: 1px solid #dee1e7;
  border-radius: 2px;
  text-align: center;
  line-height: 32px;
  font-size: 14px;
  color: #557292;
  margin-right: 14px;
  cursor: pointer;
}
.imgbox:hover,
.imgbox.hover {
  background: #1a48db;
  border-radius: 2px;
  color: #fff;
}
>>> .el-collapse-item__wrap {
  background: #e8f0fa;
  padding: 0 10px;
}
.flex {
  display: flex;
  justify-content: space-between;
}
</style>
<style scoped less="less">
.reUploadCardimage {
  width: 100%;
  position: absolute;
  left: 0;
  top: 58%;
  transform: translateY(-50%);
  .uploaddiv {
    display: flex;
    flex-wrap: wrap;
    /* justify-content: center; */
  }
  .uploadlist {
    display: flex;
    align-items: center;
    margin: 0 20px;
  }
  .upload-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 200px;
    height: 140px;
    margin: 22px 0;
  }
  .uploadBoxinfo {
    box-sizing: border-box;
    width: 200px;
    height: 140px;
    background: #ffffff;
    border-radius: 10px;
    border: 1px dashed #d8e4f0;
    text-align: center;
    font-size: 18px;
    color: #295cff;
    cursor: pointer;
    position: absolute;
    z-index: 1;
    line-height: 140px;
  }
  .uploadBoxinfo i {
    display: block;
    color: #d8e4f0;
    padding: 5px 0;
  }
  .boxsetdelecte {
    position: relative;
  }
  .mask {
    width: 200px;
    height: 140px;
    box-sizing: border-box;
    overflow: hidden;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    left: 0;
    top: 0;
  }
  .boxsetdelecte:hover .mask {
    font-size: 16px;
  }
  .is-active {
    border: 1px solid #295cff;
    background-color: rgba(0, 0, 0, 0.5);
    font-size: 16px;
  }
  .boxsetdelecte span {
    position: absolute;
    left: -24px;
    top: 24px;
  }
  .buttonboxedit {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 5px;
  }
  .buttonboxedit i {
    width: 52px;
    height: 24px;
    border-radius: 12px;
    font-size: 12px;
    color: #295cff;
    text-align: justify;
    line-height: 24px;
    text-align: center;
    font-style: normal;
    cursor: pointer;
  }
  .buttonboxedit i:last-child {
    background: #ec555a1a;
    color: #ec555a;
    margin-left: 15px;
  }
  .fileIndex {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    cursor: pointer;
    opacity: 0;
  }
  .imgmove span {
    display: flex;
    align-items: center;
    margin: 0 13px;
  }
  .imgmove span div {
    margin: 0 13px;
  }
}
.loading-container {
  text-align: center;
  padding: 16px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #909399;
}

.loading-icon {
  margin-right: 8px;
  animation: rotate 1.5s linear infinite;
}

.loading-text {
  font-size: 14px;
}

.no-more {
  text-align: center;
  color: #909399;
  font-size: 14px;
  padding: 16px 0;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.control-group {
  position: fixed;
  right: 900px;
  bottom: 24px;
  z-index: 10;
  display: flex;
  align-items: center;
  margin-left: 30px;
  .el-slider__input {
    width: 80px;
  }
}

.upload-wrapper {
  position: relative;
  width: 200px;
  height: 140px;
}

.drag-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(41, 92, 255, 0.2);
  border: 2px dashed #295cff;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.drag-overlay.drag-active {
  display: flex;
  animation: dragGlow 1s infinite;
}

@keyframes dragGlow {
  0% {
    box-shadow: 0 0 10px rgba(41, 92, 255, 0.3);
  }
  50% {
    box-shadow: 0 0 20px rgba(41, 92, 255, 0.5);
  }
  100% {
    box-shadow: 0 0 10px rgba(41, 92, 255, 0.3);
  }
}
</style>